<!--
 * @Date: 2023-11-13 15:46:52
 * @LastEditTime: 2025-03-29 16:27:10
 * @Description: content
-->
<template>
    <view class="content">
        <uni-nav-bar :title="$c.detailPageTitle((pageData && pageData.goods) || '')" color="#fff" backgroundColor="transparent" :border="false" :statusBar="true" :fixed="true" @clickLeft="$c.back()">
            <view class="uni-nav-bar-l-icon" slot="left">
                <view class="uni-nav-bar-l-icon-left icon">
                    <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
                </view>
            </view>
        </uni-nav-bar>

        <view class="hd-banner">
            <view v-if="
          pageData &&
          pageData.goods.lock_is == 1 &&
          pageData.lock_info.goods_lock_surplus_time > 0
        " class="lock-box" :style="{
          'padding-top': `${$sys().statusBarHeight}px`
        }">
                <view class="user-area">
                    <view class="avatar icon">
                        <image :src="pageData.lock_info.goods_lock_user_headimg" lazy-load></image>
                    </view>

                    <view class="name hang1">
                        {{ pageData.lock_info.goods_lock_user_nickname }}
                    </view>
                </view>

                <view class="is-lock">锁箱中</view>

                <view class="count-down">
                    倒计时:
                    <text>{{ secNum }}S</text>
                </view>
            </view>

            <image :src="pageData && pageData.goods.imgurl_detail" lazy-load></image>
        </view>

        <view class="banner-up c_bg" :style="{
        backgroundImage: `url(${$img('/static/img2/cc46.png')})`
      }">
            <view class="box-title c_bg" :style="{
          backgroundImage: `url(${$img('/static/img2/cc49.png')})`
        }">
                <view class="box-title-inner">
                    <uni-notice-bar :style="{
              width: `100%`
            }" :speed="30" background-color="transparent" color="#000" scrollable single :text="(pageData && pageData.goods.title) || ''"></uni-notice-bar>
                </view>
            </view>

            <view v-if="pageData" class="rule-price">
                <view v-if="pageData.goods.type == 5" class="rule" @click="$refs.rulePop.getRule(13, '购买说明')">
                    <image :src="$img('/static/img2/cc47.png')" lazy-load></image>
                </view>

                <view v-else-if="pageData.goods.type == 6" class="rule" @click="$refs.rulePop.getRule(18, '购买说明')">
                    <image :src="$img('/static/img2/cc47.png')" lazy-load></image>
                </view>

                <view v-else class="rule" @click="$refs.rulePop.getRule(7, '购买说明')">
                    <image :src="$img('/static/img2/cc47.png')" lazy-load></image>
                </view>

                <view class="price c_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc48.png')})`
          }">
                    <template v-if="pageData.goods.type != 5">¥</template>
                    <text>{{ pageData.goods.price * 1 }}</text>
                    <template v-if="pageData.goods.type == 5">积分</template>
                    /抽
                </view>
            </view>

            <view class="box-num">
                <view class="has-title">本箱剩余:</view>

                <view class="has-nums">
                    <text>
                        {{ (pageData && pageData.goods.goodslist_surplus_stock) || '0' }}
                        <text>
                            /{{ (pageData && pageData.goods.goodslist_stock) || '0' }}
                        </text>
                    </text>
                </view>
            </view>

            <view class="box-change">
                <view class="change-l c_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc50.png')})`
          }">
                    <view class="arrow" @click="prev">
                        <image :src="$img('/static/img2/cc51.png')" lazy-load></image>
                    </view>

                    <view class="box-number">
                        第
                        <text>{{ (pageData && pageData.goods.num) || '0' }}</text>
                        /{{ (pageData && pageData.goods.stock) || 0 }}箱
                    </view>

                    <view class="arrow" @click="next">
                        <image :src="$img('/static/img2/cc52.png')" lazy-load></image>
                    </view>
                </view>

                <view class="change-r" @click="changeBox">
                    <image :src="$img('/static/img2/cc55.png')" lazy-load></image>
                </view>
            </view>
        </view>

        <view v-if="pageData" class="tab-btn">
            <view class="tab-item common_bg" v-for="(item, i) in tabList" :key="i" :class="{
          act: tabCur == i
        }" :style="{
          backgroundImage: `url(${$img('/static/img2/cc53.png')})`
        }" @click="tabChange(i)">
                <text>{{ item.title }}</text>
            </view>
        </view>

        <view v-if="tabCur == 1 && pageData" class="list">
            <view class="list-item" v-for="(item, i) in pageData.goodslist" :key="i" @click="previewDetail(item)">
                <view class="pic">
                    <image :src="item.imgurl" lazy-load></image>

                    <view class="type-tag">{{ item.shang_title }}</view>

                    <view v-if="item.goods_type == 2" class="yu-tag">预售</view>

                    <view class="num">{{ item.surplus_stock }}/{{ item.stock }}</view>

                    <view v-if="item.surplus_stock <= 0" class="shadow">
                        <view class="icon">
                            <!-- <image :src="$img('/static/img/sold_out.png')" lazy-load></image> -->
                            <view class="sold-out">已售罄</view>
                        </view>
                    </view>
                </view>

                <view class="item-info">
                    <view class="title hang1">
                        {{ item.title }}
                    </view>

                    <view class="desc">{{ item.pro }}</view>

                    <view class="price">
                        <text>
                            ¥
                            <text>{{ item.sc_money }}</text>
                        </text>
                    </view>
                </view>
            </view>
        </view>

        <template v-else-if="tabCur == 2">
            <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getLog" :down="downOption" :up="upOption">
                <scroll-view class="sub-tab" scroll-x>
                    <view class="sub-tab-item common_bg" v-for="(item, i) in subTab" :key="i" :class="{
              act: subTabCur == i
            }" @click="subTabChange(i)">
                        {{ item.shang_title }}
                    </view>
                </scroll-view>

                <view class="log-list">
                    <view class="log-item" v-for="(item, i) in logList" :key="i">
                        <view v-if="item.luck_no" class="log-num">
                            第{{ item.luck_no }}发
                        </view>

                        <view class="avatar">
                            <image :src="item.user_info.headimg" lazy-load></image>
                        </view>

                        <view class="info">
                            <view class="name hang1">
                                {{ item.user_info.nickname }}
                            </view>

                            <view class="time">{{ item.addtime }}</view>
                        </view>

                        <view class="prize">
                            <view class="pic">
                                <image :src="item.goodslist_imgurl" lazy-load></image>
                            </view>

                            <view class="title hang1">
                                {{ item.goodslist_title }}
                            </view>

                            <view class="num">×{{ item.prize_num }}</view>
                        </view>
                    </view>
                </view>
            </mescroll-body>
        </template>

        <template v-else-if="tabCur==3">
            <!-- <scroll-view scroll-y="true" style="height: 100vh;"> -->
            <view class="rank-list">
                <view class="rank-item mt20 flex j-s" v-for="item in logList" :key="item.rank_num">
                    <image :src="item.headimg" class="item-avatar"></image>
                    <view class="f1 f-c j-s ml12">
                        <view>
                            <view class="f-c">
                                <view class="item_num f-c-c">冲{{item.count_num}}发</view>
                                <view class="item_nickname ml8 omit">{{item.nickname}}</view>
                            </view>
                            <view class="f-c f-w mt20">
                                <view class="item_cate mb12 mr12" v-for="(k,i) in  item.shang_nums_info" :key="i">
                                    {{k.shang_title}}×{{k.shang_num}}
                                </view>
                            </view>
                        </view>
                        <view class="item_no ml48">NO.<text>{{item.rank_num}}</text></view>
                    </view>
                </view>
            </view>
            <!-- </scroll-view> -->
        </template>
        <!-- <view class="fixed-btns">
      <view class="btn" @click="doRefresh">
        <image :src="$img('/static/img/refresh.png')" lazy-load></image>
      </view>

      <view class="btn relative">
        <button class="hide" open-type="share"></button>

        <image :src="$img('/static/img/share.png')" lazy-load></image>
      </view>

      <view class="btn" @click="toBag">
        <image :src="$img('/static/img/bag.png')" lazy-load></image>
      </view>
    </view> -->

        <view v-if="pageData" class="ft-fixed">
            <view v-if="pageData.goods.type == 3" class="lt-btn c_bg" :style="{
          backgroundImage: `url(${$img('/static/img2/cc19.png')})`
        }" @click="confirmSubmit([0, 1])">
                一发入魂
            </view>

            <template v-else>
                <view class="btn common_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc175.png')})`
          }" @click="confirmSubmit([0, 1])">
                    <view v-if="pageData.goods.lock_is == 1 && pageData.goods.sale_time" class="tip c_bg" :style="{
              backgroundImage: `url(${$img('/static/img2/cc61.png')})`
            }">
                        锁箱+{{ pageData.goods.sale_time }}秒
                    </view>
                </view>

                <view class="btn common_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc177.png')})`
          }" @click="confirmSubmit([0, 3])">
                    <view v-if="pageData.goods.lock_is == 1 && pageData.goods.three_time" class="tip c_bg" :style="{
              backgroundImage: `url(${$img('/static/img2/cc61.png')})`
            }">
                        锁箱+{{ pageData.goods.three_time }}秒
                    </view>
                </view>

                <view class="btn common_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc179.png')})`
          }" @click="confirmSubmit([0, 5])">
                    <view v-if="pageData.goods.lock_is == 1 && pageData.goods.five_time" class="tip c_bg" :style="{
              backgroundImage: `url(${$img('/static/img2/cc61.png')})`
            }">
                        锁箱+{{ pageData.goods.five_time }}秒
                    </view>
                </view>

                <view class="btn common_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc176.png')})`
          }" @click="confirmSubmit([0, 10])">
                    <view v-if="pageData.goods.lock_is == 1 && pageData.goods.ten_time" class="tip c_bg" :style="{
              backgroundImage: `url(${$img('/static/img2/cc61.png')})`
            }">
                        锁箱+{{ pageData.goods.ten_time }}秒
                    </view>
                </view>

                <view class="btn common_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc178.png')})`
          }" @click="confirmSubmit([0, 50])">
                    <view v-if="pageData.goods.lock_is == 1 && pageData.goods.fifty_time" class="tip c_bg" :style="{
              backgroundImage: `url(${$img('/static/img2/cc61.png')})`
            }">
                        锁箱+{{ pageData.goods.fifty_time }}秒
                    </view>
                </view>

                <view v-if="pageData.goods.type != 5" class="btn common_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc180.png')})`
          }" @click="confirmSubmit([0, pageData.goods.goodslist_surplus_stock])"></view>

                <!-- <template v-if="pageData.goods.type != 5">
          <view
            class="btn large lock"
            :style="{
              backgroundImage: `url(${$img('/static/img2/3_yf_btnl.png')})`
            }"
          >
            <image
              v-if="pageData.goods.lock_is == 1"
              :src="$img('/static/img2/cc57.png')"
              lazy-load
            ></image>

            <image
              v-else
              :src="$img('/static/img2/cc77.png')"
              lazy-load
            ></image>

            <text>
              {{ pageData.goods.lock_is == 1 ? '锁箱模式' : '竞技模式' }}
            </text>
          </view>

          <view
            class="btn large common_bg"
            :style="{
              backgroundImage: `url(${$img('/static/img2/cc58.png')})`
            }"
            @click="confirmSubmit([0, pageData.goods.goodslist_surplus_stock])"
          >
          </view>
        </template> -->
            </template>
        </view>

        <uni-popup ref="dPop" type="center">
            <view v-if="previewData" class="d-pop common_bg" :style="{
          backgroundImage: `url(${$img('/static/img2/cc62.png')})`
        }">
                <view class="pic">
                    <image :src="previewData.imgurl" lazy-load></image>
                </view>

                <view class="title">
                    <text class="hang1">
                        {{ previewData.title }}
                    </text>
                </view>

                <view class="d-list">
                    <view class="d-item">
                        {{ previewData.shang_title }} {{ previewData.pro }}
                    </view>

                    <view class="d-item">产品类型:{{ optData.type_text }}</view>
                </view>

                <view class="close icon" @click="close('dPop')">
                    <image :src="$img('/static/img2/cc63.png')" lazy-load></image>
                </view>
            </view>
        </uni-popup>

        <uni-popup ref="buyPop" type="bottom">
            <view v-if="orderData" class="buy-pop c_bg" :style="{
          backgroundImage: `url(${$img('/static/img2/cc71.png')})`
        }">
                <view class="buy-pop-hd">
                    确认订单

                    <view class="close icon" @click="close('buyPop')">
                        <image :src="$img('/static/img2/cc75.png')" lazy-load></image>
                    </view>
                </view>

                <view class="hd-line"></view>

                <view class="buy-card">
                    <view class="buy-info">
                        <view class="pic">
                            <image :src="orderData.goods.imgurl_detail" lazy-load></image>
                        </view>

                        <view class="info-r">
                            <view class="title hang1">
                                {{ orderData.goods.title }}
                            </view>

                            <view class="type">类型:明信片</view>

                            <template v-if="
                  orderData.goods.is_shou_zhe == 1 &&
                  orderData.goods.shou_zhe_price * 1 > 0
                ">
                                <view class="price-num">
                                    <view class="price">
                                        <template v-if="pageData.goods.type != 5">¥</template>
                                        <text>{{ orderData.goods.shou_zhe_price }}</text>
                                        <template v-if="pageData.goods.type == 5">积分</template>
                                        (首抽5折)
                                    </view>

                                    <view class="num">×{{ 1 }}</view>
                                </view>

                                <view v-if="orderData.goods.prize_num > 1" class="price-num">
                                    <view class="price">
                                        <template v-if="pageData.goods.type != 5">¥</template>
                                        <text>{{ orderData.goods.price }}</text>
                                        <template v-if="pageData.goods.type == 5">积分</template>
                                    </view>

                                    <view class="num">
                                        ×{{ orderData.goods.prize_num * 1 - 1 }}
                                    </view>
                                </view>
                            </template>

                            <view v-else class="price-num">
                                <view class="price">
                                    <template v-if="pageData.goods.type != 5">¥</template>
                                    <text>{{ orderData.goods.price }}</text>
                                    <template v-if="pageData.goods.type == 5">积分</template>
                                </view>

                                <view class="num">×{{ orderData.goods.prize_num }}</view>
                            </view>
                        </view>
                    </view>

                    <view class="line"></view>

                    <template v-if="pageData.goods.type != 5">
                        <view class="card-row" @click="toCoupon">
                            <view class="title">优惠券</view>

                            <view class="row-r">
                                <text v-if="couponData && orderData.coupon_price > 0" @click.stop="couponData = ''">
                                    {{ '取消使用' }}
                                </text>

                                {{
                  couponData && orderData.coupon_price > 0
                    ? `-${couponData.price}`
                    : '未选择'
                }}

                                <view class="icon">
                                    <image :src="$img('/static/img2/cc72.png')" lazy-load></image>
                                </view>
                            </view>
                        </view>

                        <!-- <view class="card-row" @click="$c.to({ url: '/pages/user/vip' })">
              <view class="title">
                {{
                  orderData.zhe
                    ? `会员折扣 (${orderData.zhe}折)`
                    : '暂无会员抵扣'
                }}
              </view>

              <view class="row-r">
                详情

                <view class="icon">
                  <image :src="$img('/static/img2/cc72.png')" lazy-load></image>
                </view>
              </view>
            </view> -->
                    </template>
                </view>

                <view class="pay-card" v-if="optData.type_text !='一番赏'">
                    <view class="pay-title">请选择支付方式</view>

                    <view v-if="pageData.goods.type == 5" class="pay-type">
                        <view class="icon">
                            <image :src="$img('/static/img2/cc100.png')" lazy-load></image>
                        </view>

                        <view class="title">
                            使用积分抵扣
                            {{ orderData.use_score }} (剩余:{{ orderData.score }})
                        </view>

                        <view class="icon">
                            <image v-if="true" :src="$img('/static/img2/cc44.png')" lazy-load></image>

                            <image v-else :src="$img('/static/img2/cc45.png')" lazy-load></image>
                        </view>
                    </view>

                    <template v-else>
                        <!-- <view class="pay-type" @click="changePay('useIntegral')">
              <view class="icon">
                <image :src="$img('/static/img2/cc73.png')" lazy-load></image>
              </view>

              <view class="title">
                使用幸运币抵扣¥
                {{ orderData.use_integral_money }} (剩余:{{
                  orderData.integral
                }}个)
              </view>

              <view class="icon">
                <image
                  v-if="useIntegral"
                  :src="$img('/static/img2/cc44.png')"
                  lazy-load
                ></image>

                <image
                  v-else
                  :src="$img('/static/img2/cc45.png')"
                  lazy-load
                ></image>
              </view>
            </view> -->

                        <view class="pay-type" @click="changePay('useMoney')">
                            <view class="icon">
                                <image :src="$img('/static/img2/cc74.png')" lazy-load></image>
                            </view>

                            <view class="title">
                                使用余额抵扣¥
                                {{ orderData.use_money }} (剩余:{{ orderData.money }})
                            </view>

                            <view class="icon">
                                <image v-if="useMoney" :src="$img('/static/img2/cc44.png')" lazy-load></image>

                                <image v-else :src="$img('/static/img2/cc45.png')" lazy-load></image>
                            </view>
                        </view>
                    </template>
                </view>
                <view class="pay-card" v-else-if="pageData.goods.pay_mode == 1">
                    <view class="pay-title">请选择支付方式</view>
                    <view class="pay-type" @click="changePay('useMoney')" v-if="">
                        <view class="icon">
                            <image :src="$img('/static/img2/cc74.png')" lazy-load></image>
                        </view>

                        <view class="title">
                            使用余额抵扣¥
                            {{ orderData.use_money }} (剩余:{{ orderData.money }})
                        </view>

                        <view class="icon">
                            <image v-if="useMoney" :src="$img('/static/img2/cc44.png')" lazy-load></image>

                            <image v-else :src="$img('/static/img2/cc45.png')" lazy-load></image>
                        </view>
                    </view>
                </view>

                <view class="agree" @click="isAgree = !isAgree">
                    <view class="icon">
                        <image v-if="isAgree" :src="$img('/static/img2/cc44.png')" lazy-load></image>

                        <image v-else :src="$img('/static/img2/cc44.png')" lazy-load></image>
                    </view>

                    我已满18岁,阅读并同意

                    <text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
                        《用户协议》
                    </text>

                    <text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
                        《隐私政策》
                    </text>
                </view>

                <view class="rule">
                    <scroll-view class="rule-inner" scroll-y>
                        <view v-html="sendRuleData"></view>
                    </scroll-view>
                </view>

                <view class="pay-btn c_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc78.png')})`
          }" @click="$c.noDouble(confirmSubmit, [1, buyNum])">
                    确认支付
                    {{
            pageData.goods.type == 5
              ? ` ${orderData.score}积分`
              : ` ¥${orderData.price}`
          }}
                </view>
            </view>
        </uni-popup>

        <buy-notice ref="buyNotice" @confirm="$c.noDouble(confirmSubmit, [1, buyNum, true])"></buy-notice>

        <uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
            <view v-if="prizeData" class="res-pop">
                <view class="res-pop-hd">
                    <image :src="$img('/static/img2/cc66.png')" lazy-load></image>
                </view>

                <scroll-view class="res-pop-bd" scroll-y>
                    <view class="res-list">
                        <view class="res-item c_bg" v-for="(item, i) in prizeData.data" :key="i" :style="{
                backgroundImage: `url(${$img('/static/img2/cc67.png')})`
              }">
                            <view class="type-num">
                                <view class="type-tag">{{ item.shang_title }}</view>

                                <view class="num">×{{ item.prize_num }}</view>
                            </view>

                            <view class="pic c_bg" :style="{
                  backgroundImage: `url(${$img('/static/img2/cc68.png')})`
                }">
                                <image :src="item.goodslist_imgurl" lazy-load></image>
                            </view>

                            <view class="title hang1">
                                {{ item.goodslist_title }}
                            </view>

                            <view v-if="showChange == 1" class="exchange">
                                {{
                  item.goodslist_money * 1 > 0
                    ? `可兑换:${item.goodslist_money}`
                    : `不可兑换`
                }}
                            </view>
                        </view>
                    </view>
                </scroll-view>

                <view class="res-pop-ft">
                    <view class="ft-btn confirm common_bg" :style="{
              backgroundImage: `url(${$img('/static/img2/cc69.png')})`
            }" @click="toBag">
                        <!-- <text>去盒柜</text> -->
                    </view>

                    <view class="ft-btn common_bg" :style="{
              backgroundImage: `url(${$img('/static/img2/cc70.png')})`
            }" @click="close('resPop')">
                        <!-- 确定 -->
                    </view>
                </view>
            </view>
        </uni-popup>

        <view v-if="aniShow" class="ani-pop">
            <image :src="aniSrc" lazy-load></image>
        </view>

        <rule-pop ref="rulePop"></rule-pop>
    </view>
</template>

<script>
export default {
    data() {
        return {
            optData: '',
            boxNum: '',
            buyNum: 0,
            useMoney: true,
            useIntegral: true,
            // 下拉刷新的配置(可选, 绝大部分情况无需配置)
            downOption: {
                auto: false
            },
            // 上拉加载的配置(可选, 绝大部分情况无需配置)
            upOption: {
                auto: true,
                page: {
                    size: 15 // 每页数据的数量,默认10
                }
            },
            tabList: {
                1: {
                    title: '商品预览'
                },
                2: {
                    title: '中赏记录'
                },
                3: {
                    title: '排行'
                }
            },
            tabCur: 1,
            subTab: [],
            subTabCur: 0,
            isAgree: true,
            pageData: '',
            couponData: '',
            orderData: '',
            prizeData: '',
            secTimer: null,
            secNum: 0,
            aniSrc: '',
            aniShow: false,

            logList: [],
            sendRuleData: '',
            previewData: '',
            showChange: 0,
            payWay: 'ali_wap',
            intervalId: null,
        }
    },

    onShareAppMessage() {
        return {
            title: `简单模玩${this.pageData.goods.title}系列 第${this.pageData.goods.num}套`,
            imageUrl: this.pageData.goods.imgurl_detail,
            path: '/pages/shouye/detail' +
                this.$c.qs({
                    goods_id: this.pageData.goods.id,
                    goods_num: this.pageData.goods.num,
                    pid: uni.getStorageSync('userinfo').ID
                })
        }
    },

    onLoad(options) {
        console.log(options);
        this.optData = options

        this.tabChange(this.tabCur)

        uni.$on('chooseCoupon', data => {
            // console.log('data', data)

            this.couponData = data
            this.confirmSubmit([0, this.buyNum])
        })

        // uni.getImageInfo({
        //   src: this.$img('/static/img/animation.png'),
        //   success: ({ path }) => {
        //     this.aniSrc = path
        //   }
        // })

        this.$c.getRule(10).then(res => {
            if (res.status == 1) {
                this.sendRuleData = res.data
            }
        })
    },

    onShow() {
        this.getUserInfo()
    },
    beforeDestroy() {
        clearInterval(this.intervalId)
    },
    onReady() {
        // this.open('dPop')
        // this.open('buyPop')
        // this.open('buyNotice')
        // this.open('resPop')
    },

    onUnload() {
        uni.$off('chooseCoupon')
    },

    methods: {
        getUserInfo() {
            if (!uni.getStorageSync('token')) {
                return
            }

            let that = this
            that.req({
                url: 'user',
                success(res) {
                    if (res.status == 1) {
                        uni.setStorageSync('userinfo', res.data.userinfo)

                        /* 判断兑换是否展示 */
                        if (res.data.userinfo.dh_is_open == 1) {
                            that.showChange = 1
                        }
                    }
                }
            })
        },

        previewDetail(item) {
            console.log(item)
            this.previewData = item

            this.open('dPop')
        },

        resetSec() {
            clearInterval(this.secTimer)
            this.secTimer = null
            this.secNum = 0
        },

        runSec(time) {
            const nowTime = Math.floor(Date.now() / 1000)

            if (time < nowTime) {
                this.resetSec()
                return
            }

            this.secTimer && clearInterval(this.secTimer)

            this.secNum = time - nowTime
            this.secTimer = setInterval(() => {
                if (this.secNum <= 0) {
                    this.resetSec()

                    uni.showLoading({
                        title: '加载中',
                        mask: true
                    })
                    setTimeout(() => {
                        // uni.hideLoading()
                        this.doRefresh()
                    }, 1000)
                    return
                }

                this.secNum -= 1
            }, 1000)
        },

        toCoupon() {
            this.$c.to({
                url: '/pages/user/coupon',
                query: {
                    type: 2,
                    state: this.pageData.goods.type,
                    total_price: this.orderData.order_total
                }
            })
        },

        getPrize(order_num) {
            if (!order_num) {
                return
            }

            setTimeout(() => {
                this.req({
                    url: 'prizeorderlog',
                    data: {
                        order_num
                    },
                    Loading: true,               
                    success: res => {
                        if (res.status == 1) {
                            this.prizeData = res.data

                            if (res.data.data.length <= 0) {
                                // this.getPrize(order_num)
                                return
                            }

                            // this.aniShow = true
                            // setTimeout(() => {
                            //   this.aniShow = false
                            // if (uni.getStorageSync('_can_play_music') == 1) {
                            // 	this.bgmCtx.openBgm.stop()
                            // 	this.bgmCtx.openBgm.play()
                            // }
                            clearInterval(this.intervalId)
                            this.open('resPop')
                            // }, 1300)
                        }
                    }
                })
            }, 2000)
        },

        changePay(e) {
            this[e] = !this[e]

            this.confirmSubmit([0, this.buyNum])
        },

        confirmSubmit([type, num, fromNotice = false]) {
            let _this = this;
            clearInterval(_this.intervalId)
            let url = 'ordermoney'

            if (type == 1) {
                url = 'orderbuy'

                if (!uni.getStorageSync('_agree_buy_notice') && !fromNotice) {
                    _this.$refs.buyNotice.getRule(6)
                    return
                }
            }

            _this.buyNum = num

            let data = {
                goods_id: _this.pageData.goods.id,
                prize_num: _this.buyNum,
                goods_num: _this.pageData.goods.num,
                use_money_is: _this.useMoney ? 1 : 2,
                // use_integral_is: this.useIntegral ? 1 : 2,
                coupon_id: (_this.couponData && _this.couponData.id) || '',
                pay_way: _this.payWay,
                // ad_id: uni.getStorageSync('_ad_id')
            }

            if (_this.pageData.goods.type == 5) {
                data.coupon_id = ''
            }
            _this.req({
                url,
                data,
                success: async res => {
                    if (res.status == 1) {
                        if (type == 0) {
                            if (res.data.coupon_id) {
                                _this.couponData = {
                                    id: res.data.coupon_id,
                                    price: res.data.coupon_price
                                }
                            }

                            _this.orderData = res.data

                            _this.open('buyPop')
                        }

                        if (type == 1) {
                            _this.close('buyPop')

                            if (res.data.status == 1) {
                                if (_this.payWay == 'ali_wap') {
                                    uni.showModal({
                                        title: '支付链接,复制到浏览器打开完成支付',
                                        content: res.data.res,
                                        cancelText: '复制',
                                        confirmText: '取消支付',
                                        success: (e) => {
                                            if (e.cancel) {
                                                uni.setClipboardData({
                                                    data: res.data.res,
                                                    success() {
                                                        uni.showToast({ title: '复制成功' });
                                                        setTimeout(function () {
                                                            _this.intervalId = setInterval(() => {
                                                                _this.getPrize(res.data.order_num)
                                                            }, 1500)
                                                        }, 2000);
                                                        _this.doRefresh()
                                                    }
                                                });

                                            }

                                        },
                                    });
                                } else {
                                    const status = await _this.$c.wxMpPay({
                                        data: res.data.res
                                    })

                                    if (status == 'success') {
                                        _this.intervalId = setInterval(() => {
                                            _this.getPrize(res.data.order_num)
                                        }, 1500)
                                        _this.doRefresh()
                                    }
                                }

                            } else {
                                _this.$c.toast({
                                    title: res.msg,
                                    duration: 500,
                                    success: () => {
                                        _this.intervalId = setInterval(() => {
                                            _this.getPrize(res.data.order_num)
                                        }, 1500)
                                        _this.doRefresh()
                                    }
                                })
                            }
                        }

                    }
                }
            })
        },

        toggleCollect() {
            this.req({
                url: 'addCollect',
                data: {
                    goods_id: this.pageData.goods.id,
                    goods_num: this.pageData.goods.num
                },
                success: res => {
                    if (res.status == 1) {
                        this.doRefresh()
                    }
                }
            })
        },

        toBag() {
            this.close('resPop')

            this.$c.to({
                type: 3,
                url: '/pages/sangdai/sangdai'
            })
        },

        changeBox() {
            this.$c.to({
                url: '/pages/shouye/huanxiang',
                query: {
                    id: this.pageData.goods.id,
                    type_text: this.optData.type_text
                }
            })
        },

        doRefresh() {
            this.getData()

            if (this.tabCur == 2) {
                this.tabChange(this.tabCur)
            }
        },

        subTabChange(i) {
            this.subTabCur = i
            this.logList = []

            this.$nextTick(() => {
                setTimeout(() => {
                    this.mescroll.resetUpScroll()
                    this.mescroll.scrollTo(0, 0)
                }, 100)
            })
        },

        tabChange(i) {
            this.tabCur = i

            switch (Number(i)) {
                case 1:
                    this.getData()
                    break
                case 2:
                    this.subTabChange(this.subTabCur)
                    break
                case 3:
                    this.logList = []
                    this.getRank()
                    break
            }
        },

        next() {
            if (this.optData.goods_num >= this.pageData.goods.stock) {
                this.optData.goods_num = this.pageData.goods.stock

                this.$c.toast({
                    title: '已经是最后一箱了'
                })
                return
            }

            this.optData.goods_num += 1
            this.getData()
        },

        prev() {
            if (this.optData.goods_num <= 1) {
                this.optData.goods_num = 1

                this.$c.toast({
                    title: '已经是第一箱了'
                })
                return
            }

            this.optData.goods_num -= 1
            this.getData()
        },

        getLog({
            num,
            size
        }) {
            this.req({
                url: 'shang_log',
                data: {
                    page: num,
                    goods_id: this.optData.goods_id,
                    goods_num: this.optData.goods_num,
                    shang_id: this.subTab.length > 0 ? this.subTab[this.subTabCur].shang_id : ''
                },
                Loading: true,
                success: res => {
                    if (res.status == 1) {
                        this.subTab = res.data.category

                        if (num == 1) {
                            this.logList = []
                        }

                        this.logList = this.logList.concat(res.data.data)
                        this.mescroll.endByPage(res.data.data.length, res.data.last_page)
                    }
                }
            })
        },

        getRank() {
            this.req({
                url: 'shang_order_ranks',
                data: {
                    num: this.optData.goods_num,
                    goods_id: this.optData.goods_id,
                },
                Loading: true,
                success: res => {
                    if (res.status == 1) {
                        this.logList = res.data.list
                    }
                }
            })
        },

        getData() {
            this.req({
                url: 'goodsdetail',
                data: {
                    goods_id: this.optData.goods_id,
                    goods_num: this.optData.goods_num
                },
                success: res => {
                    if (res.status == 1) {
                        this.optData.goods_num = Number(res.data.goods.num)
                        if (res.data.goods.pay_mode == 2 && this.optData.type_text == '一番赏') this.useMoney = false
                        if (
                            res.data.goods.lock_is == 1 &&
                            res.data.lock_info.goods_lock_surplus_time > 0
                        ) {
                            this.runSec(res.data.lock_info.goods_lock_surplus_time)
                        }

                        this.pageData = res.data
                    }
                }
            })
        },

        close(e) {
            this.$refs[e].close()
        },

        open(e) {
            this.$refs[e].open()
        }
    }
}
</script>

<style lang="scss">
.content {
    padding: 0 0 300rpx;

    /deep/.uni-navbar__placeholder {
        display: none;
    }

    .hd-banner {
        width: 100%;
        height: 750rpx;
        position: relative;

        .lock-box {
            width: 100%;
            height: 500rpx;
            box-sizing: content-box;
            background: linear-gradient(
                180deg,
                #000000 0%,
                rgba(0, 0, 0, 0) 100%
            );
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;

            .user-area {
                display: flex;
                align-items: center;

                .avatar {
                    width: 100rpx;
                    height: 100rpx;
                    border: 1rpx solid #ffffff;
                    border-radius: 50%;
                }

                .name {
                    max-width: 250rpx;
                    margin-left: 20rpx;

                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 36rpx;
                    color: #ffffff;
                }
            }

            .is-lock {
                padding: 16rpx 0;

                font-family: 光良酒-干杯体, 光良酒-干杯体;
                font-weight: 400;
                font-size: 40rpx;
                color: #e40d1d;
                text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000,
                    0 0 2px #000000;
            }

            .count-down {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 32rpx;
                color: #ffffff;
                text-shadow: 0 0 10rpx #000;

                text {
                    color: #e4690d;
                }
            }
        }
    }

    .banner-up {
        position: relative;
        z-index: 1;
        margin: -194rpx 0 0;
        width: 100%;
        height: 280rpx;

        .box-title {
            width: 310rpx;
            height: 108rpx;
            box-sizing: border-box;
            padding: 26rpx 20rpx 0;
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%, -46rpx);

            /deep/.uni-noticebar__content-text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #333333;
            }
        }

        .rule-price {
            padding: 18rpx 18rpx 0;
            display: flex;
            justify-content: space-between;

            .rule {
                width: 202rpx;
                height: 84rpx;
            }

            .price {
                width: 202rpx;
                height: 84rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                padding: 10rpx 0 0 10rpx;

                font-family: 光良酒-干杯体, 光良酒-干杯体;
                font-weight: 400;
                font-size: 24rpx;
                color: #ffffff;
                text-shadow: 0 0 4px #000, 0 0 4px #000, 0 0 4px #000,
                    0 0 4px #000;
            }

            .c_bg {
            }
        }

        .box-num {
            margin: -28rpx auto 0;
            width: fit-content;
            height: 40rpx;
            display: flex;

            .has-title {
                padding: 0 20rpx;
                display: flex;
                align-items: center;
                background: #e40d1d;

                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 20rpx;
                color: #ffffff;
            }

            .has-nums {
                padding: 0 20rpx;
                display: flex;
                align-items: center;
                background: #0e0e0e;

                text {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #e40d88;

                    text {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 20rpx;
                        color: #ffffff;
                    }
                }
            }
        }

        .box-change {
            display: flex;
            align-items: center;
            padding: 24rpx 30rpx 0;

            .change-l {
                flex: 1;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-right: 20rpx;
                background-size: 510rpx 64rpx;
                background-position: center center;

                .arrow {
                    width: 158rpx;
                    height: 78rpx;
                }

                .box-number {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #ffffff;

                    text {
                        font-size: 32rpx;
                        color: #e40d88;
                    }
                }
            }

            .c_bg {
            }

            .change-r {
                width: 100rpx;
                height: 68rpx;
            }
        }
    }

    image {
        width: 100%;
        height: 100%;
        border-radius: inherit;
    }

    .common_bg {
    }

    // .page-hd {
    //   margin: 0 auto;
    //   width: 710rpx;
    //   height: 420rpx;
    //   box-sizing: border-box;
    //   padding: 40rpx 40rpx 0;
    //   position: relative;
    //   display: flex;

    //   .half-tag {
    //     width: 184rpx;
    //     height: 40rpx;
    //     position: absolute;
    //     left: 10rpx;
    //     top: 10rpx;
    //     z-index: 1;

    //     image {
    //       width: 100%;
    //       height: 100%;
    //     }
    //   }

    //   .hd-l {
    //     display: flex;
    //     flex-flow: column nowrap;
    //     align-items: center;

    //     .pic {
    //       width: 250rpx;
    //       height: 250rpx;
    //       background: #000000;
    //       border: 2px solid #666666;
    //       box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(176, 128, 255, 0.8);
    //       box-sizing: border-box;
    //       position: relative;

    //       .lock-tag {
    //         position: absolute;
    //         left: 0;
    //         top: 0;
    //         z-index: 1;
    //         width: 100rpx;
    //         height: 36rpx;
    //         border: 1px solid #cccccc;
    //         background: linear-gradient(
    //           90deg,
    //           #6adeff 0%,
    //           #7ab5ff 50%,
    //           #ff7feb 100%
    //         );
    //         border-radius: 4rpx;
    //         display: flex;
    //         justify-content: center;
    //         align-items: center;

    //         font-size: 22rpx;
    //         font-family: Source Han Sans CN;
    //         font-weight: 400;
    //         color: #222222;
    //       }
    //       div {
    //         .user {
    //           .avatar {
    //           }
    //           .icon {
    //           }
    //           .name {
    //           }
    //           .hang1 {
    //           }
    //         }
    //         .ing-img {
    //         }
    //         .count-down {
    //         }
    //       }

    //       .lock-ing {
    //         position: absolute;
    //         left: 0;
    //         top: 0;
    //         z-index: 1;
    //         width: 100%;
    //         height: 100%;
    //         display: flex;
    //         flex-flow: column nowrap;
    //         justify-content: center;
    //         align-items: center;
    //         background: rgba(18, 13, 39, 0.8);

    //         .user {
    //           display: flex;
    //           align-items: center;

    //           .avatar {
    //             width: 50rpx;
    //             height: 50rpx;
    //             background: #7f7f7f;
    //             border: 1px solid #ffffff;
    //             border-radius: 50%;
    //           }
    //           .icon {
    //           }

    //           .name {
    //             margin-left: 10rpx;
    //             max-width: 130rpx;

    //             font-size: 24rpx;
    //             font-family: Source Han Sans CN;
    //             font-weight: 400;
    //             color: #ffffff;
    //           }
    //           .hang1 {
    //           }
    //         }

    //         .ing-img {
    //           width: 100%;
    //           height: 70rpx;
    //           margin: 20rpx 0;
    //         }

    //         .count-down {
    //           font-size: 24rpx;
    //           font-family: Source Han Sans CN;
    //           font-weight: 400;
    //           color: #ffffff;

    //           text {
    //             color: #d0d1ff;
    //           }
    //         }
    //       }
    //     }

    //     .box {
    //       margin-top: 8rpx;

    //       font-size: 28rpx;
    //       font-family: Source Han Sans CN;
    //       font-weight: 400;
    //       color: #ffffff;
    //     }
    //   }

    //   .hd-r {
    //     width: calc(100% - 250rpx);
    //     box-sizing: border-box;
    //     padding-left: 20rpx;

    //     .title {
    //       font-size: 32rpx;
    //       font-family: Source Han Sans CN;
    //       font-weight: 400;
    //       color: #ffffff;
    //     }
    //     .hang1 {
    //     }

    //     .price-unit {
    //       display: flex;
    //       align-items: center;
    //       margin-top: 16rpx;

    //       .price {
    //         font-size: 28rpx;
    //         font-family: Source Han Sans CN;
    //         font-weight: 400;
    //         color: transparent;

    //         background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
    //         background-clip: text;

    //         text {
    //           font-size: 36rpx;
    //         }
    //       }

    //       .unit {
    //         font-size: 24rpx;
    //         font-family: Source Han Sans CN;
    //         font-weight: 400;
    //         color: #dddddd;
    //       }
    //     }

    //     .progress {
    //       margin-top: 30rpx;

    //       /deep/.cmd-progress-inner {
    //         background: rgba(255, 255, 255, 0.2);
    //       }
    //     }

    //     .has {
    //       margin-top: 8rpx;

    //       font-size: 24rpx;
    //       font-family: Source Han Sans CN;
    //       font-weight: 400;
    //       color: #dddddd;

    //       text {
    //         color: #d0d1ff;
    //       }
    //     }

    //     .handel-btn {
    //       display: flex;
    //       justify-content: center;
    //       align-items: center;
    //       margin-top: 20rpx;
    //       .left {
    //       }

    //       .left,
    //       .right {
    //         width: 52rpx;
    //         height: 52rpx;
    //       }

    //       .icon {
    //       }

    //       .change {
    //         width: 92rpx;
    //         height: 92rpx;
    //         margin: 0 40rpx;
    //       }
    //       .right {
    //       }
    //     }
    //     .common_bg {
    //     }

    //     .handel-text {
    //       display: flex;
    //       justify-content: center;
    //       align-items: center;
    //       margin-top: 20rpx;

    //       text {
    //         font-size: 24rpx;
    //         font-family: Source Han Sans CN;
    //         font-weight: 400;
    //         color: #dddddd;

    //         &:nth-child(2) {
    //           margin: 0 50rpx;
    //         }
    //       }
    //     }

    //     .user-num {
    //       position: absolute;
    //       left: 10rpx;
    //       bottom: 10rpx;
    //       width: 300rpx;
    //       display: flex;
    //       justify-content: center;
    //       align-items: center;

    //       font-size: 22rpx;
    //       font-family: Source Han Sans CN;
    //       font-weight: 400;
    //       color: #dddddd;

    //       .user-list {
    //         display: flex;
    //         padding-right: 10rpx;

    //         .avatar {
    //           width: 50rpx;
    //           height: 50rpx;
    //           background: #7f7f7f;
    //           border: 1px solid #cccccc;
    //           border-radius: 50%;
    //           box-sizing: border-box;
    //           position: relative;
    //           margin-left: -26rpx;
    //         }
    //       }
    //     }
    //   }
    // }

    .tab-btn {
        display: flex;
        // padding: 0 60rpx 0;
        justify-content: space-evenly;
        align-items: center;
        position: relative;
        z-index: 2;
        margin: -22rpx 0 0;

        .tab-item {
            width: 220rpx;
            height: 76rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            filter: grayscale(1);

            font-family: 光良酒-干杯体, 光良酒-干杯体;
            font-weight: 400;
            font-size: 28rpx;
            color: #ffffff;
            text-shadow: 0 0 3px #000000, 0 0 3px #000000, 0 0 3px #000000,
                0 0 3px #000000;

            &.act {
                filter: grayscale(0);
            }
        }

        .common_bg {
        }

        // .btn {
        //   display: flex;
        //   align-items: center;

        //   font-size: 28rpx;
        //   font-family: Source Han Sans CN;
        //   font-weight: 400;
        //   color: #ffffff;

        //   .icon {
        //     width: 32rpx;
        //     height: 32rpx;
        //     margin-right: 6rpx;
        //   }

        //   &.pd {
        //     padding-left: 60rpx;
        //   }

        //   &.dis {
        //     filter: grayscale(1);
        //   }
        // }

        .pd {
        }

        .btn {
            .icon {
            }
        }

        .icon {
        }
    }

    .list {
        padding: 30rpx;
        display: grid;
        grid-template-columns: repeat(3, 210rpx);
        gap: 30rpx 30rpx;

        .list-item {
            width: 100%;

            .pic {
                width: 100%;
                height: 210rpx;
                position: relative;
                border: 1px solid;
                border-image: linear-gradient(180deg, #e40d1d, #000000) 1 1;
                box-sizing: border-box;

                .type-tag {
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 2;
                    padding: 0 16rpx;
                    height: 32rpx;
                    background: #e4690d;
                    display: flex;
                    align-items: center;

                    font-family: 光良酒-干杯体, 光良酒-干杯体;
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #ffffff;
                }

                .yu-tag {
                    width: 66rpx;
                    height: 32rpx;
                    border: 1px solid #00ed82;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    z-index: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: #000;

                    font-size: 20rpx;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #1efb98;
                }

                .num {
                    position: absolute;
                    z-index: 2;
                    right: 6rpx;
                    bottom: 6rpx;
                    padding: 0 16rpx;
                    height: 32rpx;
                    background: rgba(0, 0, 0, 0.6);
                    border-radius: 16rpx;
                    display: flex;
                    align-items: center;

                    font-size: 24rpx;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ffffff;
                }

                .shadow {
                    position: absolute;
                    z-index: 1;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.6);
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .sold-out {
                        transform: rotate(-30deg);
                        font-family: 光良酒-干杯体, 光良酒-干杯体;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #ffffff;
                        text-shadow: 0 0 3px #000000, 0 0 3px #000000,
                            0 0 3px #000000, 0 0 3px #000000;
                    }

                    // .icon {
                    //   width: 112rpx;
                    //   height: 68rpx;
                    // }
                }
            }

            .item-info {
                background: #222222;
                border-radius: 0rpx 0rpx 12rpx 12rpx;
                border: 2rpx solid #e40d1d;

                .title {
                    padding: 10rpx 10rpx 0;

                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #ffffff;
                }

                .hang1 {
                }

                .desc {
                    padding: 6rpx 10rpx 0;

                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #cccccc;
                }

                .price {
                    padding: 6rpx 10rpx 10rpx;
                    line-height: 1;

                    text {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 20rpx;
                        color: #e40d88;
                    }
                }
            }
        }
    }

    .sub-tab {
        white-space: nowrap;
        padding: 30rpx 0 10rpx;

        .sub-tab-item {
            display: inline-flex;
            align-items: center;
            margin-left: 40rpx;
            position: relative;
            padding: 0 0 10rpx;

            font-family: 光良酒-干杯体, 光良酒-干杯体;
            font-weight: 400;
            font-size: 28rpx;
            color: #ffffff;
            text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);

            &.act {
                color: #e40d1d;

                &::after {
                    content: "";
                    display: block;
                    width: 36rpx;
                    height: 4rpx;
                    background: #e40d1d;
                    border-radius: 304rpx 304rpx 304rpx 304rpx;
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translateX(-50%);
                }
            }

            &:last-child {
                margin-right: 40rpx;
            }
        }

        .common_bg {
        }
    }

    .log-list {
        padding: 1rpx 30rpx 30rpx;

        .log-item {
            height: 120rpx;
            padding: 0 20rpx;
            display: flex;
            align-items: center;
            margin-top: 20rpx;
            background: #252525;
            border: 2rpx solid #444444;
            position: relative;

            .log-num {
                position: absolute;
                right: 0;
                top: 0;
                z-index: 1;
                padding: 0 16rpx;
                height: 32rpx;
                background: #e4690d;
                display: flex;
                align-items: center;

                font-family: 光良酒-干杯体, 光良酒-干杯体;
                font-weight: 400;
                font-size: 20rpx;
                color: #ffffff;
            }

            .avatar {
                width: 80rpx;
                height: 80rpx;
                background: #9d9d9d;
                border: 1px solid #cccccc;
                border-radius: 50%;
                overflow: hidden;
            }

            .info {
                width: 230rpx;
                margin-left: 20rpx;

                .name {
                    font-size: 28rpx;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ffffff;
                }

                .hang1 {
                }

                .time {
                    margin-top: 10rpx;
                    white-space: nowrap;

                    font-size: 24rpx;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #dddddd;
                }
            }

            .prize {
                flex: 1;
                padding-left: 40rpx;
                display: flex;
                align-items: center;

                .pic {
                    width: 60rpx;
                    height: 60rpx;
                }

                .title {
                    width: 150rpx;
                    margin-left: 20rpx;

                    font-size: 24rpx;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ffffff;
                }

                .hang1 {
                }

                .num {
                    font-size: 24rpx;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ffffff;
                }
            }
        }
    }

    .rank-list {
        margin: 0 30rpx;

        .rank-item {
            background: #252525;
            border: 1px solid #444444;
            padding: 20rpx 30rpx;

            .item-avatar {
                width: 88rpx;
                height: 88rpx;
                border-radius: 50%;
                flex-shrink: 0;
            }

            .item_num {
                width: 92rpx;
                height: 36rpx;
                background: #e40d1d;
                font-size: 20rpx;
                color: #ffffff;
                border-radius: 8rpx;
            }

            .item_nickname {
                width: 260rpx;
                font-size: 24rpx;
                color: #ffffff;
            }

            .item_cate {
                padding: 2rpx 8rpx;
                background: rgba(#ffffff, 0.4);
                border-radius: 4rpx;
                font-size: 20rpx;
                color: #ffffff;
            }

            .item_no {
                font-family: YouSheBiaoTiHei;
                font-size: 28rpx;
                color: #ffffff;

                text {
                    font-size: 36rpx;
                }
            }
        }
    }

    .fixed-btns {
        position: fixed;
        z-index: 10;
        right: 20rpx;
        bottom: 300rpx;

        .btn {
            width: 94rpx;
            height: 110rpx;
            margin-top: 40rpx;
        }
    }

    .ft-fixed {
        position: fixed;
        z-index: 10;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 1rpx 0 30rpx;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        background: linear-gradient(
            0deg,
            #000000 0%,
            rgba(43, 45, 140, 0) 100%
        );

        .lt-btn {
            margin: 40rpx auto 0;
            width: 500rpx;
            height: 88rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            font-family: 光良酒-干杯体, 光良酒-干杯体;
            font-weight: 400;
            font-size: 32rpx;
            color: #ffffff;
            text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
        }

        .btn {
            margin: 30rpx 0 0;
            width: 192rpx;
            height: 76rpx;
            position: relative;

            .tip {
                position: absolute;
                right: 0;
                top: 0;
                transform: translate(0, -70%);
                min-width: 118rpx;
                height: 56rpx;
                display: flex;
                justify-content: center;
                padding: 10rpx 10rpx 0;
                white-space: nowrap;
                box-sizing: border-box;

                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 20rpx;
                color: #333333;
            }
        }

        .common_bg {
        }

        .btn {
            .tip {
            }
        }

        .mg {
        }

        .large {
        }

        .btn {
            .tip {
            }
        }

        .lock {
        }

        .btn {
        }
    }

    .d-pop {
        position: relative;
        width: 594rpx;
        height: 752rpx;
        padding: 40rpx;
        box-sizing: border-box;

        .pic {
            width: 100%;
            height: 514rpx;
        }

        .title {
            padding: 20rpx 0 0;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;

            .hang1 {
            }

            text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 32rpx;
                color: #ffffff;
            }
        }

        .common_bg {
        }

        .d-list {
            .d-item {
                padding: 10rpx 0 0;

                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #ffffff;
            }
        }

        .close {
            width: 196rpx;
            height: 78rpx;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translate(-50%, 160%);
        }

        .icon {
        }
    }

    .buy-pop {
        padding: 0 30rpx 30rpx;
        box-sizing: border-box;
        background-size: 100% auto;

        .buy-pop-hd {
            padding: 20rpx 0 0;
            padding-left: 10rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            font-family: 光良酒-干杯体, 光良酒-干杯体;
            font-weight: 400;
            font-size: 36rpx;
            color: #ffffff;
            text-shadow: 0 0 2px #e40d1d, 0 0 2px #e40d1d, 0 0 2px #e40d1d,
                0 0 2px #e40d1d;

            .close {
                width: 48rpx;
                height: 48rpx;
            }

            .icon {
            }
        }

        .hd-line {
            width: 690rpx;
            height: 2rpx;
            background: #ffffff;
            margin: 20rpx auto;
        }

        .buy-card {
            background: #cccccc;
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            padding: 30rpx 30rpx 10rpx;

            .buy-info {
                display: flex;

                .pic {
                    width: 160rpx;
                    height: 160rpx;
                    border-radius: 10rpx;
                }

                .info-r {
                    width: calc(100% - 160rpx);
                    box-sizing: border-box;
                    display: flex;
                    flex-flow: column nowrap;
                    justify-content: space-between;
                    padding: 10rpx 0 10rpx 30rpx;

                    .title {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #333333;
                    }

                    .hang1 {
                    }

                    .type {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 22rpx;
                        color: #333333;
                    }

                    .price-num {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .price {
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 30rpx;
                            color: #e40d1d;
                        }

                        .num {
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #333333;
                        }
                    }

                    .price-num {
                        .price {
                        }

                        .num {
                        }
                    }

                    .price {
                    }

                    .num {
                    }
                }
            }

            .line {
                height: 1px;
                background: #d8d8d8;
                margin: 30rpx 0 10rpx;
            }

            .card-row {
                padding: 16rpx 0;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .title {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #333333;
                }

                .row-r {
                    display: flex;
                    align-items: center;

                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;

                    text {
                        font-size: 20rpx;
                        color: #888;
                        margin-right: 30rpx;
                    }

                    .icon {
                        width: 32rpx;
                        height: 32rpx;
                    }
                }
            }

            .card-row {
                .title {
                }

                .row-r {
                    .icon {
                    }
                }
            }
        }

        .pay-card {
            margin: 30rpx 0 0;
            padding: 30rpx 30rpx 0;
            background: #cccccc;

            .pay-title {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #333333;
            }

            .pay-type {
                padding: 20rpx 0;
                border-radius: 20rpx;
                display: flex;
                align-items: center;

                .icon {
                    width: 40rpx;
                    height: 40rpx;
                }

                .title {
                    flex: 1;
                    padding: 0 20rpx;

                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #333333;
                }
            }
        }

        .pay-type {
            .icon {
            }

            .title {
            }
        }

        .pay-type {
            .icon {
            }

            .title {
            }
        }

        .agree {
            display: flex;
            margin-top: 30rpx;

            font-size: 26rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
            line-height: 40rpx;

            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }

            text {
                color: #e40d1d;
            }
        }

        .rule {
            padding: 20rpx;
            background: #cccccc;
            border-radius: 20rpx;
            box-sizing: border-box;
            margin: 20rpx 0 0;

            .rule-inner {
                max-height: 120rpx;

                font-size: 20rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #333333;
            }
        }

        .pay-btn {
            margin-top: 30rpx;
            height: 92rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            font-family: 光良酒-干杯体, 光良酒-干杯体;
            font-weight: 400;
            font-size: 32rpx;
            color: #ffffff;
            text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
        }
    }

    .res-pop {
        width: 100%;
        height: 758rpx;
        position: relative;

        .res-pop-hd {
            width: 360rpx;
            height: 72rpx;
            margin: 0 auto;
        }

        .res-pop-bd {
            margin: 70rpx 0 0;
            height: 620rpx;

            .res-list {
                padding: 0 30rpx 30rpx;
                display: grid;
                grid-template-columns: repeat(3, 220rpx);
                gap: 30rpx 16rpx;

                .res-item {
                    width: 100%;
                    border: 1px solid;
                    box-sizing: border-box;

                    .type-num {
                        padding: 16rpx 12rpx 0;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .type-tag {
                            font-family: 光良酒-干杯体, 光良酒-干杯体;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #ffffff;
                        }

                        .num {
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 20rpx;
                            color: #ffffff;
                        }
                    }

                    .pic {
                        margin: 10rpx auto 0;
                        width: 196rpx;
                        height: 196rpx;
                        position: relative;
                        box-sizing: border-box;
                        padding: 6rpx;
                    }

                    .title {
                        padding: 10rpx 10rpx 0;

                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #ffffff;
                    }

                    .exchange {
                        padding: 10rpx 10rpx;
                        text-align: center;

                        font-size: 22rpx;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #ddd;
                    }

                    .hang1 {
                    }
                }
            }
        }

        .res-pop-ft {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-evenly;
            transform: translateY(100%);
            padding-top: 40rpx;

            .ft-btn {
                width: 196rpx;
                height: 78rpx;
                display: flex;
                justify-content: center;
                align-items: center;

                font-size: 32rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #ffffff;

                // &.confirm {
                //   text {
                //     color: transparent;

                //     background: linear-gradient(
                //       90deg,
                //       #6adeff 0%,
                //       #7ab5ff 50%,
                //       #ff7feb 100%
                //     );
                //     background-clip: text;
                //   }
                // }
            }

            .confirm {
            }

            .common_bg {
            }

            .ft-btn {
            }
        }
    }

    .ani-pop {
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 88;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000;

        image {
            width: 100%;
            height: 1624rpx;
        }
    }
}
</style>